<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head>
<title>商品详情</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" href="lib/weui.min.css">
<link rel="stylesheet" href="css/jquery-weui.css">
<link rel="stylesheet" href="css/style.css">
	</head>
<body ontouchstart>
<div class="weui-content">
  <!--产品详情-->
<div class="weui-tab">
   <div class="weui-navbar" style="position:fixed; top:0; left:0; right:0; height:44px;">
      <a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on" href="#tab1">商品</a>
      <a class="weui-navbar__item proinfo-tab-tit" href="#tab2">详情</a>
      <a class="weui-navbar__item proinfo-tab-tit" href="#tab3">评价</a>
    </div>
    <div class="weui-tab__bd proinfo-tab-con">
      <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
        <!--主图轮播-->
        <div class="swiper-container swiper-zhutu">
          <div class="swiper-wrapper">
            <div class="swiper-slide" th:each="lst:${listim}"><img th:src="${lst.path}" /></div>
          </div>
          <div class="swiper-pagination swiper-zhutu-pagination"></div>
        </div>
        <div class="wy-media-box-nomg weui-media-box_text">
          <h4 class="wy-media-box__title" th:text="${gd.goodsName}"></h4>
          <div class="wy-pro-pri mg-tb-5">¥<em class="num font-20" th:text="${gd.price}"></em></div>
          <p class="weui-media-box__desc" th:text="${gd.goodsDsc}"></p>
        </div>
        <div class="wy-media-box2 weui-media-box_text">
          <div class="weui-media-box_appmsg">
            <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">优惠</span></div>
            <div class="weui-media-box__bd">
              <div class="promotion-message clear">
                <i class="yhq"><span class="label-text">优惠券</span></i>
                <span class="promotion-item-text">满197.00减40.00</span>
              </div>
              <div class="promotion-message clear">
                <i class="yhq"><span class="label-text">优惠券</span></i>
                <span class="promotion-item-text">满197.00减40.00</span>
              </div>
              <div class="yhq-btn clear"><a href="yhq_list.html">去领券</a></div>
            </div>
          </div>
        </div>
        <div class="wy-media-box2 weui-media-box_text" th:if="${not #lists.isEmpty(listprd)}">
          <div class="weui-media-box_appmsg" th:each="lstp:${listprd}">
            <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit" th:text="${lstp.modlename}"></span></div>
            <div class="weui-media-box__bd">
              <div class="promotion-sku clear">
                <ul>
                  <li th:each="array:${lstp.modletype}"><a href="javascript:;" th:text="${array}"></a></li>
                </ul>
              </div>
            </div>
          </div>
          <!--<div class="weui-media-box_appmsg">-->
            <!--<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">颜色</span></div>-->
            <!--<div class="weui-media-box__bd">-->
              <!--<div class="promotion-sku clear">-->
                <!--<ul>-->
                  <!--<li><a href="javascript:;">黑色</a></li>-->
                  <!--<li><a href="javascript:;">红色</a></li>-->
                  <!--<li><a href="javascript:;">白色</a></li>-->
                  <!--<li><a href="javascript:;">蓝色</a></li>-->
                  <!--<li><a href="javascript:;">橘黄色</a></li>-->
                  <!--<li><a href="javascript:;">绿色</a></li>-->
                <!--</ul>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
        </div>
        <div class="wy-media-box2 txtpd weui-media-box_text">
          <div class="weui-media-box_appmsg">
            <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">送至</span></div>
            <div class="weui-media-box__bd">
              <div class="promotion-message clear">
                <span class="promotion-item-text" id="privince"></span>
                <span class="promotion-item-text" id="city"></span>
                <span class="promotion-item-text" id="area"></span>
              </div>
            </div>
          </div>
          <div class="weui-media-box_appmsg">
            <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">运费</span></div>
            <div class="weui-media-box__bd">
              <div class="promotion-message clear">
                <span class="promotion-item-text">免运费<!--<div class="wy-pro-pri">¥<span class="num">11.00</span></div>--></span>
              </div>
            </div>
          </div>
          <div class="weui-media-box_appmsg">
            <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">商家</span></div>
            <div class="weui-media-box__bd">
              <div class="promotion-message clear" th:if="${not #lists.isEmpty(st)}">
                <span class="promotion-item-text" th:text="${st.companyName}"></span>
              </div>
              <div class="promotion-message clear" th:if="${#lists.isEmpty(st)}">
                <span class="promotion-item-text"></span>
              </div>
            </div>
          </div>
          <div class="weui-media-box_appmsg">
            <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">提示</span></div>
            <div class="weui-media-box__bd">
              <div class="promotion-message clear">
                <span class="promotion-item-text"><p class="txt-color-ml">支持7天无理由退换货</p></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="tab2" class="weui-tab__bd-item ">
        <div class="pro-detail" th:each="modify:${listmd}">
          <img th:src="${modify.path}"/>
        </div>
      </div>
      <div id="tab3" class="weui-tab__bd-item">
        <!--评价-->
        <div class="weui-panel__bd evaluate_list" th:each="listel:${listel}">
          <div class="wy-media-box weui-media-box_text">
            <div class="weui-cell nopd weui-cell_access">
              <div class="weui-cell__hd"><img src="upload/headimg.jpg" alt="" style="width:20px;margin-right:5px;display:block"></div>
              <div class="weui-cell__bd weui-cell_primary" th:if="${not #lists.isEmpty(listel.user)}"><p th:if="${not #lists.isEmpty(listel.user.username)&&listel.anonymityType=='否'}" class="hyname"><span th:text="${listel.user.username}"></span></p>
                <p th:if="${#lists.isEmpty(listel.user.username)||listel.anonymityType=='是'}">匿名评价</p></div>
              <span class="weui-cell__time" th:text="${#dates.format(listel.addTime, 'yyyy-MM-dd')}"></span>
            </div>
            <div class="comment-item-star"><span th:class="'real-star comment-stars-width'+${listel.goodsEvaluate}"></span></div>
            <p class="weui-media-box__desc" th:text="${listel.evaluateDse}"></p>
            <ul class="weui-uploader__files clear mg-com-img" th:if="${not #lists.isEmpty(listel.user.list.get(0).path)}">
              <!--<li class="weui-uploader__file" style="background-image:url(upload/pro3.jpg)"></li>-->
              <span th:each="ls:${listel.user.list}" class="imgspan">
                <input type="hidden" th:value="${ls.path}"  class="pjimg"/>
                <li class="weui-uploader__file" name="tupian"></li>
              </span>
              <!--<li class="weui-uploader__file" style="background-image:url(upload/pro3.jpg)"></li>-->
            </ul>
          </div>
        </div>
        <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link list-more" th:if="${listel.size()>=6}">
            <div class="weui-cell__bd">查看全部</div>
            <span class="weui-cell__ft"></span>
          </a>
        <p style="text-align: center;" th:if="${listel.size()==0}">该商品暂无人填写评价！</p>
      </div>
    </div>
  </div>  
</div>

<span id="tophovertree" title="返回顶部"></span>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu"  th:unless="${session.user==null}">
  <a href="javascript:;" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-kefu"></div>
    <p class="weui-tabbar__label" name="aaa" id="service">客服</p>
  </a>
  <a href="javascript:;" id='show-toast' class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
    <p class="weui-tabbar__label">收藏</p>
  </a>
  <a href="show_all.htm" class="promotion-foot-menu-items">
    <span th:if="${num!=null}"><span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;" th:text="${num}"></span></span>
    <div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
    <p class="weui-tabbar__label">购物车</p>
  </a>
  <a href="javascript:shopping2();" class="weui-tabbar__item yellow-color open-popup" data-target="#join_cart">
    <p class="promotion-foot-menu-label">加入购物车</p>
  </a>
  <a href="javascript:;" class="weui-tabbar__item red-color open-popup" data-target="#selcet_sku">
    <p class="promotion-foot-menu-label">立即购买</p>
  </a>
</div>
<div class="weui-tabbar wy-foot-menu"  th:unless="${session.user!=null}">
  <a th:href="@{/login.htm(goodsId=${gd.id})}" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-kefu"></div>
    <p class="weui-tabbar__label" id="service01" name="aaa">客服</p>
  </a>
  <a th:href="@{/login.htm(goodsId=${gd.id})}" id='show-toast01' class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
    <p class="weui-tabbar__label">收藏</p>
  </a>
  <a th:href="@{/login.htm(goodsId=${gd.id})}" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
    <p class="weui-tabbar__label">购物车</p>
  </a>
  <a th:href="@{/login.htm(goodsId=${gd.id})}" class="weui-tabbar__item yellow-color open-popup">
    <p class="promotion-foot-menu-label">加入购物车</p>
  </a>
  <a th:href="@{/login.htm(goodsId=${gd.id})}" class="weui-tabbar__item red-color open-popup">
    <p class="promotion-foot-menu-label">立即购买</p>
  </a>
</div>
<div id="join_cart" class='weui-popup__container popup-bottom' style="z-index:600;">
  <div class="weui-popup__overlay" style="opacity:1;"></div>
  <div class="weui-popup__modal">
    <div class="modal-content">
      <div class="weui-msg" style="padding-top:0;">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
          <h2 class="weui-msg__title">成功加入购物车</h2>
          <p class="weui-msg__desc">亲爱的用户，您的商品已成功加入购物车，为了保证您的商品快速送达，请您尽快到购物车结算。</p>
        </div>
        <div class="weui-msg__opr-area">
          <p class="weui-btn-area">
            <a href="javascript:shopping1();" class="weui-btn weui-btn_primary">去购物车结算</a>
            <a href="javascript:;shuaxin()" class="weui-btn weui-btn_default close-popup">不，我再看看</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="selcet_sku" class='weui-popup__container popup-bottom' style="z-index:600;">
  <div class="weui-popup__overlay" style="opacity:1;"></div>
  <div class="weui-popup__modal">
    <div class="toolbar">
      <div class="toolbar-inner">
        <a href="javascript:;" class="picker-button close-popup">关闭</a>
        <h1 class="title">商品属性</h1>
      </div>
    </div>
    <div class="modal-content">
      <div class="weui-msg" style="padding-top:0;">
        <div class="wy-media-box2 weui-media-box_text" style="margin:0;">
          <div class="weui-media-box_appmsg" th:each="lstp:${listprd}">
            <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit" th:text="${lstp.modlename}"></span></div>
            <div class="weui-media-box__bd">
              <div class="promotion-sku clear">
                <ul>
                  <li th:each="array:${lstp.modletype}"><a href="javascript:;" th:text="${array}"></a></li>
                </ul>
              </div>
            </div>
          </div>
          <!--<div class="weui-media-box_appmsg">-->
            <!--<div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">颜色</span></div>-->
            <!--<div class="weui-media-box__bd">-->
              <!--<div class="promotion-sku clear">-->
                <!--<ul>-->
                  <!--<li><a href="javascript:;">黑色</a></li>-->
                  <!--<li><a href="javascript:;">红色</a></li>-->
                  <!--<li><a href="javascript:;">白色</a></li>-->
                  <!--<li><a href="javascript:;">蓝色</a></li>-->
                  <!--<li><a href="javascript:;">橘黄色</a></li>-->
                  <!--<li><a href="javascript:;">绿色</a></li>-->
                <!--</ul>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
        </div>
        <div class="weui-msg__opr-area">
          <p class="weui-btn-area">
            <input type="hidden" th:value="${gd.id}" id="gooodsId"/>
            <a href="javascript:shopping();" class="weui-btn weui-btn_primary">立即购买</a>
            <a href="javascript:;" class="weui-btn weui-btn_default close-popup">不，我再看看</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="lib/jquery-2.1.4.js"></script> 
<script src="lib/fastclick.js"></script> 
<script>
  $(function() {
    FastClick.attach(document.body);
      $(".hyname").each(function () {
          var tt = $(this).text();
          var name="";
          if(tt.length>2){
              for(var i=0;i<tt.length;i++){
                  var ff=tt.substring(i,i+1);
                  if(i==0||i==tt.length-1){
                      name+=ff;
                  }else if(i==tt.length-2){
                      name+="**";
                  }
              }
          }else{
              name+=tt.substring(0,1)+"**";
          }
          $(this).text(name);
      });
      $(".evaluate_list:gt(6)").hide();
      $(".list-more").click(function () {
          $(".evaluate_list").show();
          $(this).hide();
      });

      $(".imgspan").each(function () {
          var mm=$(this).children(".pjimg").val();
          var imgpath=""+"url("+mm+")";
          $(this).children("li[name='tupian']").css("background-image",imgpath);
      })

  });
</script> 
<script src="js/jquery-weui.js"></script>
<script src="js/swiper.js"></script>
<script>

$(".swiper-zhutu").swiper({
        loop: true,
		paginationType:'fraction',
        autoplay:5000
      });
</script>
<script>
    var model="";
$(function(){
	$(".promotion-sku li").click(function(){
		$(this).addClass("active").siblings("li").removeClass("active");
		  model+=$(this).find("a").html()+";";
		})
	});
function shopping() {
    var mm=$("#gooodsId").val();
    window.location.href="buynow.htm?model="+model+"&goodsId="+mm;
}
function shopping1() {
        var mm=$("#gooodsId").val();
        window.location.href="select_one.htm?model="+model+"&goodsId="+mm;
    }
  function shopping2() {
      var mm=$("#gooodsId").val();
      $.ajax({
          url:"add_one.htm?model="+model+"&goodsId="+mm,
          type:"post",
          success:function (mag) {

          },
          error:function () {

          }
      })
  }
  function shuaxin() {
      window.location.reload();
  }
</script>
<script>
      $(document).on("click", "#show-toast", function() {
        $.toast("收藏成功", function() {
          console.log('close');
        });
      })
</script>
<script>
      $(document).on("open", ".weui-popup-modal", function() {
        console.log("open popup");
      }).on("close", ".weui-popup-modal", function() {
        console.log("close popup");
      });
    </script>
<script>
$(function (){initTopHoverTree("tophov"+"ertree",30,10,10); });
</script>
<script>
function initTopHoverTree(hvtid, times, right, bottom) {
$("#" + hvtid).css("right", right).css("bottmo", bottom);
$("#" + hvtid).on("click", function () { goTopHovetree(times); })
$(window).scroll(function () {
if ($(window).scrollTop() > 268) {
$("#" + hvtid).fadeIn(100);
}
else {
$("#" + hvtid).fadeOut(100);
}
});
}
//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTopHovetree(times) {
if (!!!times) {
$(window).scrollTop(0);
return;
}
var sh = $('body').scrollTop();//移动总距离
var inter = 13.333;//ms,每次移动间隔时间
var forCount = Math.ceil(times / inter);//移动次数
var stepL = Math.ceil(sh / forCount);//移动步长
var timeId = null;
function aniHovertree() {
timeId &amp;&amp; clearTimeout(timeId);
timeId = null;
//console.log($('body').scrollTop());
if ($('body').scrollTop() &lt;= 0 || forCount &lt;= 0) {
$('body').scrollTop(0);
return;
}
forCount--;
sh -= stepL;
$('body').scrollTop(sh);
timeId = setTimeout(function () { aniHovertree(); }, inter);
}
aniHovertree();
}
</script>


<!--bmap的js,在线使用-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=32f38c9491f2da9eb61106aaab1e9739"></script>
<!--通过IP获取对应位置-->
<script type="text/javascript">

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            //alert('您的位置：'+r.point.lng+','+r.point.lat);
            var myGeo = new BMap.Geocoder();
//            alert('您的位置：'+r.point.lng+','+r.point.lat);
            myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat),
                function(rs) {
                    var addComp = rs.addressComponents;
//                    alert(addComp.province + addComp.city
//                        + addComp.district + addComp.street
//                        + addComp.streetNumber);
                    $("#privince").html(addComp.province);
                    $("#city").html(addComp.city);
                    $("#area").html(addComp.district);
                });

        } else {
            alert('failed' + this.getStatus());
        }
    });
</script>
<script src="lib/jquery-2.1.4.js"></script>
<script type="text/javascript">
  $(function () {

      $("p[name='aaa']").click(function () {
          window.location.href="kefu.htm";
      /*    $.ajax({
              url:"kefu.htm",
              type:"post",
              success:function(message){
              if(message==1){
                  alert("登录成功");
              }
              },
              error:function(){
                  alert();
              }
          });*/

      });
  });

</script>
</body>
</html>
